<%--
  Created by IntelliJ IDEA.
  User: 61741
  Date: 2017/12/4
  Time: 22:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<html>
<head>
    <title>厂商商铺</title>
    <meta charset="utf-8">
    <jsp:include page="../common/portal-head.jsp"></jsp:include>
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/app.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/shop.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/page.css">
</head>
<body>
<div id="shopPage">
    <div class="top-menu-wrap">
        <img v-if="shopinfo" v-bind:src="shopinfo.userLogo" class="logo">
        <ul class="top-main-menu">
            <li><a data-href="#home" @click="scrollTo">首页</a></li>
            <li><a data-href="#product" @click="scrollTo">产品</a></li>
            <li><a data-href="#info" @click="scrollTo">新闻资讯</a></li>
            <li><a data-href="#contact" @click="scrollTo">联系我们</a></li>
        </ul>
    </div>
    <div class="page-container">
        <div class="content-wrap">
            <div id="home">
                <div class="shop-info-wrap" v-if="shopinfo">
                    <div id="shopinfo">
                        <div class="shop-dsc-outline">
                            <img class="shop-logo" v-bind:src="shopinfo.userLogo">
                            <div class="shop-dsc">
                                <h3>{{shopinfo.companyName}}</h3>
                                <p>{{shopinfo.userDsc}}</p>
                                <span><img src="${ctx}/resources/portal/img/shop_add.png">地址：{{shopinfo.userAddressName.cityName}}{{shopinfo.userAddressName.townName}}{{shopinfo.userAdd.detailAddress}}</span>
                                <span><img src="${ctx}/resources/portal/img/shop_phone.png">电话：{{shopinfo.userContact}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="slider-wrap">
                        <div class="slider">
                            <div class="slider-img">
                                <ul class="slider-img-ul" id="slider-ul">
                                    <li v-for="(causel,index) in causelList" @click="carouselction(causel)"><img
                                            v-bind:src="causel.url"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="shop-info-list">
                        <div class="shop-info-outline" id="infolist">
                            <div class="list-top">
                                <span><img src="${ctx}/resources/portal/img/shop_info.png">最新资讯</span>
                                <hr>
                            </div>
                            <img class="shop-info-pic" src="${ctx}/resources/portal/img/banner/shopinfo_pic.jpg">
                            <ul v-if="newinfolist" v-for="(info,index) in newinfolist">
                                <li v-if="index<4"><a v-bind:href="['${ctx}/articledetail/index/'+info.id]">{{info.main_title}}</a>
                                </li>
                            </ul>
                            <ul v-else>
                                <li><a>暂无资讯信息发布!</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <c:if test="${userType==3}">
                    <div class="agency-pro">
                        <h2 class="guide-title"><strong style="font-weight: 700;">本店代理品牌</strong></h2>
                        <img class="pre-button" src="${ctx}/resources/portal/img/next.png">
                        <img class="next-button" src="${ctx}/resources/portal/img/pre.png">
                        <div class="agency-branch-wrap">
                            <div class="logo-item-outline" v-for="(imginfo,index) in shopinfo.agencyBrandList">
                                <div class="logo-item">
                                    <img class="logo-img" src="imginfo.img" alt="商家logo">
                                </div>
                            </div>
                        </div>
                    </div>
                </c:if>
                <c:if test="${userType==4}">
                    <div class="sale-acti-wrap">
                        <div class="activity-title">
                            <h1>优惠方案</h1>
                            <span>更多>></span>
                        </div>
                        <div class="activity-item-outline" >
                            <div class="activity-item" v-for="(good,index) in disgoodList">
                                <div class="activity-pic">
                                    <div class="pic-big">
                                        <img v-bind:src="good.img[0]">
                                    </div>
                                </div>
                                <div class="activity-dsc">
                                    <P>{{good.goodName}}<br/>{{good.productRemark}}</P>
                                </div>
                            </div>
                        </div>
                    </div>
                </c:if>
                <c:if test="${userType==5}">
                    <div class="price-list" v-for="(price,index) in priceList">
                        <h1>物流报价单</h1>
                        <table>
                            <tr class="title-tr">
                                <th>地区</th>
                                <th>首重</th>
                                <th>续重</th>
                            </tr>
                            <tr>
                                <td class="first-th">{{price.area}}</td>
                                <td class="second-th">{{price.firstPrice}}</td>
                                <td class="third-th">{{price.nextPrice}}</td>
                            </tr>
                        </table>
                    </div>
                </c:if>
            </div>
            <div class="goods-wrap" id="product">
                <div class="goods-menu-wrap">
                    <span>商品分类</span>
                    <div class="all-good-menu">
                        <div class="list">
                            <%--<li><a class="first-menu">查看全部宝贝</a></li>--%>
                            <ul class="yiji" id="classlist" v-for="(section,index) in sectionlist">
                                <li><a @click="menuAction($event)" v-bind:id="section._id" class="inactive">【{{section.title}}】</a>
                                    <ul style="display: none" v-for="(children,index) in section.children">
                                        <li><a @click="subserach(1,$event)" data-type="goodclass"
                                               v-bind:id="children._id" class="third-menu">{{children.title}}</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="goods-list-wrap">
                    <div class="search-box-wrap">
                        <div class="search-box-input">
                            <input type="text" id="keyword" name="keyword" placeholder="请输入关键词检索资讯内容"/>
                            <button class="serach-button" data-type="keyword" data-target="keyword"
                                    @click="subserach(1,$event)">搜索
                            </button>
                        </div>
                        <%--<div class="brach-advise">--%>
                        <%--<span>内衣</span>--%>
                        <%--<a>三枪</a>--%>
                        <%--<a>阿玛尼</a>--%>
                        <%--<a>都市丽人</a>--%>
                        <%--</div>--%>
                    </div>
                    <div class="all-goods-list">
                        <div class="goods-filter-wrap">
                            <div class="seller-filiter" id="sort_all" data-type="sort" data-target=""
                                 @click="subserach(1,$event)">
                                <span>综合</span>
                                <i class="fa fa-sort-amount-desc"></i>
                            </div>
                            <div class="seller-filiter" id="sort_collect" data-type="sort" data-target="collect_amount"
                                 @click="subserach(1,$event)">
                                <span>人气</span>
                                <i class="fa fa-sort-amount-desc"></i>
                            </div>
                            <div class="seller-filiter" id="sort_newgood" data-type="sort" data-target="create_time"
                                 @click="subserach(1,$event)">
                                <span>新品</span>
                                <i class="fa fa-sort-amount-desc"></i>
                            </div>
                            <div class="seller-filiter" id="sort_saleamount" data-type="sort" data-target="sale_amount"
                                 @click="subserach(1,$event)">
                                <span>销量</span>
                                <i class="fa fa-sort-amount-desc"></i>
                            </div>
                            <div class="seller-filiter" id="sort_price" data-type="sort" data-target="price"
                                 @click="subserach(1,$event)">
                                <span>价格</span>
                                <i class="fa fa-sort-amount-desc"></i>
                            </div>
                            <img class="menu-button" src="${ctx}/resources/portal/img/menu_button.png">
                        </div>

                        <div class="goods-info-list">
                            <div v-if="good_loading" class="alert alert-info">
                                <i class="fa fa-spinner fa-spin"></i>正在加载数据...
                            </div>
                            <div v-if="!good_loading&&goodlist.length<=0" class="alert alert-warning">
                                <i class="fa fa-info"></i>没有找到符合条件的数据
                            </div>

                            <div class="sale-goods-item"  v-for="(good,index) in goodlist">
                                <div class="goods-item-pic"><img v-bind:src="good.img[0]">
                                </div>
                                <div class="goods-item-info">
                                    <div class="goods-name">
                                        <span>{{good.goodName}}</span>
                                    </div>
                                    <div class="goods-price">
                                        <span>{{good.sale_price}}￥</span>
                                    </div>
                                    <div class="add-cart">
                                        <span class="add-shop-cart"><img src="${ctx}/resources/portal/img/add_cart.png">查看详情</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pagenation-container">
                        <div id="page" class="page_div"></div>
                        <div class="clear" style="clear: both;"></div>
                    </div>
                </div>
            </div>
            <div id="info" v-if="newinfolist">
                <div class="activity-title">
                    <h1>新闻资讯</h1>
                    <span>更多>></span>
                </div>
                <div class="info-top-item" v-for="(infoitem,index) in newinfolist" @click="gotoArticle(infoitem)">
                    <div class="item-pic">
                        <img v-bind:src="infoitem.portal_img">
                    </div>
                    <div class="item-text">
                        <span class="info-title">{{infoitem.main_title}}</span>
                        <span class="info-time">{{infoitem.create_time|formatDate}}</span>
                        <span class="info-dsc">{{infoitem.sub_title}}</span>
                    </div>
                </div>
            </div>
            <div id="contact" v-if="shopinfo">
                <div class="company-banner">
                    <img v-bind:src="shopinfo.companyPics[1]">
                </div>
                <dl>
                    <dt>
                        公司名称
                    </dt>
                    <dd>
                        {{shopinfo.companyName}}
                    </dd>
                </dl>
                <dl>
                    <dt>
                        公司地址
                    </dt>
                    <dd>
                        {{shopinfo.userAddressName.cityName}}{{shopinfo.userAddressName.townName}}
                    </dd>
                </dl>
                <dl>
                    <dt>
                        详细地址
                    </dt>
                    <dd>
                        {{shopinfo.userAdd.detailAddress}}
                    </dd>
                </dl>
                <dl>
                    <dt>
                        联系方式
                    </dt>
                    <dd>
                        {{shopinfo.userContact}}
                    </dd>
                </dl>
                <dl>
                    <dt>
                        公司简介
                    </dt>
                    <dd>
                        {{shopinfo.userDsc}}
                    </dd>
                </dl>
                <dl>
                    <dt>
                        公司类型
                    </dt>

                    <dd v-if="shopinfo.userType==2">
                        厂商/供应商
                    </dd>

                    <dd v-if="shopinfo.userType==3">
                        代理商
                    </dd>

                    <dd v-if="shopinfo.userType==4">
                        辅助料商
                    </dd>

                    <dd v-if="shopinfo.userType==5">
                        物流
                    </dd>

                </dl>
            </div>
        </div>
    </div>
</div>
<jsp:include page="../portal/footer.jsp"></jsp:include>
<script src="${ctx}/resources/portal/script/page.js" type="text/javascript"></script>
<script src="${ctx}/resources/script/vue-date.js" type="text/javascript"></script>

<script type="text/javascript">
    var pageApp = new Vue({
        el: "#shopPage",
        data: {
            user_id: '${user_id}',
            section_id: "",
            shopinfo: null,
            goodlist: [],
            disgoodList: [],
            sectionlist: [],
            newinfolist: null,
            actionlist: [],
            agencyshoplist: [],
            causelList: [],
            error: false,
            error_tip: '未找到商品信息',
            good_loading: false
        },
        filters: {
            /* 时间过滤器 */
            formatDate(time) {
                var date = new Date(time);
                return formatDate(date, "yyyy-MM-dd HH:mm:ss");
            }
        },
        methods: {
            carouselAction: function (carousel) {
                switch (carousel.type) {
                    case 'LINK':
                        window.location.href = "carousel.value";
                        break;
                    case 'ARTICLE':
                        window.location.href = "${ctx}/articledetail/index/" + carousel.value;
                        break;
                    case 'GOOD':
                        window.location.href = "${ctx}/gooddetail/index/" + carousel.value;
                        break;
                }

            },
            scrollTo: function (event) {
                var $anchor = $(event.target);
                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('data-href')).offset().top - 80
                }, 500);
                event.preventDefault();
            },
            subserach: function (pageNum, event) {
                var $this = this;
                var $event = event.target;
                var data = {shopId: $this.user_id, pageNum: pageNum, pageSize: 8, goodTypeId: "", sortby: ""}
                if ($event.getAttribute('data-type') == 'keyword') {
                    data['keyword'] = $("#" + $event.getAttribute('data-target')).val() || '';
                }
                else if ($event.getAttribute('data-type') == 'sort') {
                    data['sortby'] = $event.getAttribute('data-target');
                }
                else if ($event.getAttribute('data-type') == 'goodclass') {
                    data['goodTypeId'] = $event.getAttribute('id');
                }
                $this.goodlist = [];
                $this.good_loading = true;
                asyncAjax({
                    url: ctx + "/goodMgr/good/list?" + $.param(data).replace(/(%5D|%5B)/g, ""),
                    success: function (res) {
                        console.log("res:%o", res);
                        if (res["result"] == "0") {
                            $this.goodlist = res["data"]["goods"];
                            $("#page").paging({
                                pageNo: pageNum || 1,
                                totalPage: Math.ceil(res.total / 8),
                                totalSize: res.total,
                                callback: function (num) {
                                    this.subserach(num, event);
                                }
                            })
                        } else {
                            bootbox.alert(res["msg"]);
                        }

                        $this.good_loading = false;
                    }
                })

            },
            menuAction: function ($event) {
                var $this = $($event.target);
                if ($this.siblings('ul').css('display') == 'none') {
                    $this.parent('li').siblings('li').removeClass('inactives');
                    $this.addClass('inactives');
                    $this.siblings('ul').slideDown(100).children('li');
                    if ($this.parents('li').siblings('li').children('ul').css('display') == 'block') {
                        $this.parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
                        $this.parents('li').siblings('li').children('ul').slideUp(100);

                    }
                } else {
                    //控制自身变成+号
                    $this.removeClass('inactives');
                    //控制自身菜单下子菜单隐藏
                    $this.siblings('ul').slideUp(100);
                    //控制自身子菜单变成+号
                    $this.siblings('ul').children('li').children('ul').parent('li').children('a').addClass('inactives');
                    //控制自身菜单下子菜单隐藏
                    $this.siblings('ul').children('li').children('ul').slideUp(100);

                    //控制同级菜单只保持一个是展开的（-号显示）
                    $this.siblings('ul').children('li').children('a').removeClass('inactives');
                }
            },
            gotoArticle: function (article) {
                window.location.href = "${ctx}/articledetail/index/" + article.id;
            },
            loadgoodClass: function () {
                var $this = this;
                var data = {};
                asyncAjax({
                    url: ctx + "/good/class/list?" + $.param(data).replace(/(%5D|%5B)/g, ""),
                    beforeSend: function (req) {
                        $("#classlist").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
                    },
                    success: function (res) {
                        console.log("res:%o", res);
                        if (res["result"] == "0") {
                            $("#classlist").html("");
                            if (!isEmpty(res["data"])) {
                                $this.sectionlist = res["data"].children;
                            } else {
                                $("#classlist").html("<div class='alert alert-warning'>未找商品分类信息!</div>");
                            }
                        } else {
                            bootbox.alert(res["msg"]);
                        }
                    }
                })
            },
            getGoodClass: function (el) {
                var $this = this;
                $this.section_id = $(el).attr("id");
                loadgood(1)
            },
            loadshop: function () {
                var $this = this;
                data = {};
                asyncAjax({
                    url: ctx + "/user/mgr/user/" + $this.user_id + "?" + $.param(data).replace(/(%5D|%5B)/g, ""),
                    beforeSend: function (req) {
                        $("#shopinfo").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
                    },
                    success: function (res) {
                        console.log("res:%o", res);
                        if (res["result"] == "0") {
                            $("#shopinfo").html("");
                            if (!isEmpty(res["data"])) {
                                $this.shopinfo = res["data"];
                            } else {
                                $("#shopinfo").html("<div class='alert alert-warning'>未找到对应商铺信息!</div>");
                            }
                        } else {
                            bootbox.alert(res["msg"]);

                        }
                    }
                })
            },
            loadinfo: function () {
                var $this = this;

                var data = {user_id: $this.user_id, pageNum: 1, pageSize: 4}
                asyncAjax({
                    url: ctx + "/article/getSearchList?" + $.param(data).replace(/(%5D|%5B)/g, ""),
                    beforeSend: function (req) {
                        $("#infolist ul").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
                    },
                    success: function (res) {
                        console.log("res:%o", res);
                        if (res["result"] == "0") {
                            $("#infolist ul").html("");
                            if (!isEmpty(res["data"])) {
                                $this.newinfolist = res["data"];
                            } else {
                                $("#infolist ul").html("<div class='alert alert-warning'>未找到对应资讯信息!</div>");
                            }
                        } else {
                            bootbox.alert(res["msg"]);


                        }
                    }
                })

            },
            loadgood: function (pageNum) {
                var $this = this;
                var data = {shopId: $this.user_id, pageNum: pageNum, pageSize: 8, goodTypeId: $this.section_id}
                asyncAjax({
                    url: ctx + "/goodMgr/good/list?" + $.param(data).replace(/(%5D|%5B)/g, ""),
                    success: function (res) {
                        console.log("res:%o", res);
                        if (res["result"] == "0") {
                            $("#goodlist").html("");
                            if (!isEmpty(res["data"])) {
                                $this.goodlist = res["data"]["goods"];
                                $("#page").paging({
                                    pageNo: pageNum || 1,
                                    totalPage: Math.ceil(res.total / 8),
                                    totalSize: res.total,
                                    callback: function (num) {
                                        this.loadgood(num);
                                    }
                                })
                            }
                        } else {
                            bootbox.alert(res["msg"]);


                        }
                    }
                })
            },
            loadCausel: function () {
                var $this = this;
                var data = {shopId: $this.user_id};
                asyncAjax({
                    url: ctx + "/shop/carousel/list/?" + $.param(data).replace(/(%5D|%5B)/g, ""),
                    success: function (res) {
                        console.log("res:%o", res);
                        if (res["result"] == "0") {
                            if (!isEmpty(res["data"])) {
                                $this.causelList = res["data"];
                                $this.$nextTick(function () {
                                    $(".slider-img").attr("style", "width:" + $(".slider-img-ul li").length * 100 + "% !important;");
                                    $(".slider-img-ul>li>img").css({
                                        width: $(".slider-wrap").width() + "px !important",
                                        height: "auto !important"
                                    });
                                    $(".slider").xSlider({w: 1340});
                                })
                            }
                            else {
                                $("#sliderlist").html("<div class='alert alert-warning'>尚未配置轮播图</div>")
                            }
                        } else {
                            bootbox.alert(res["msg"]);
                        }
                    }
                })
            },
            loadFlagGood: function (type) {
                var $this = this;
                var data = {city: 'default'};
                asyncAjax({
                    url: ctx + "/portal/good/flag/list/" + type + "?" + $.param(data).replace(/(%5D|%5B)/g, ""),
                    success: function (res) {
                        console.log("flag good res:%o", res);
                        if (res["result"] == "0") {
                            if (isEmpty(res["data"]) || res["data"].length <= 0) {
                                $(".activity-item").html("<label>尚未配置商品</label>");
                                return -1;
                            } else {
                                $this.disgoodList = res["data"];
                            }

                        } else {
                            bootbox.alert(res["msg"]);
                        }
                    }
                })
            }
        },
        mounted: function () {
            this.loadCausel();
            this.loadshop();
            this.loadgoodClass();
            this.loadinfo();
            this.loadgood();
            this.loadFlagGood('SHOP_DISCOUNT');
        }
    })
</script>
<script src="${ctx}/resources/portal/script/xSlider.js" type="text/javascript"></script>
</body>
</html>
